<template>
  <view class="login-box">
    <view class="bg"></view>
    <view class="logo-box">
      <t-image class="img" :src="logo" mode="widthFix"></t-image>
      <!-- <text style="font-size: 48rpx; margin-top: 20rpx; font-weight: bold;">禁止观看</text> -->
      <t-image class="text" :src="logoText" mode="widthFix"></t-image>
    </view>
    <view class="action-box">
      <div class="button" @click="goToPhoneLogin">手机号码登录</div>
      <!-- '@tap="goToPhoneLogin"' -->
      <text class="text" @click="anonymousLogin">
        <!-- @tap="anonymousLogin" -->
        游客登录</text
      >
    </view>
    <view class="login-type-box">
      <view class="item-box" @click="goToAccountLogin">
        <!-- @tap="goToAccountLogin" -->
        <t-image class="type-img" :src="accountLogin"></t-image>
        <text class="type-text">账密登录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import loginApi from "@/api/loginApi";
import logo from "@/assets/login/logo.png";
import logoText from "@/assets/login/logo-text.png";
import accountLogin from "@/assets/login/accountLogin.png";
import { Toast } from "tdesign-mobile-vue";
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();
const router = useRouter();
const route = useRoute();

// 游客登录
const anonymousLogin = async () => {
  const result = await loginApi.anonymousLogin({
    platform: "PWA",
    // code:code.value,
  });
  if (result.code === 0) {
    Toast({
      duration: 2000,
      message: "登录成功",
    });
    localStorage.setItem("token", result.token);
    cookies.set("token", result.token);
    localStorage.setItem("userInfo", JSON.stringify(result.user));
    router.push({
      name: "comic",
    });
  } else {
    Toast({
      duration: 2000,
      message: result.msg,
    });
    localStorage.clear();
    router.push({
      name: "login",
    });
  }
};

// 跳转手机号码登录
const goToPhoneLogin = () => {
  router.push({
    name: "phoneLogin",
  });
};

// 跳转账号密码登录
const goToAccountLogin = () => {
  router.push({
    name: "accountLogin",
  });
};

// 获取剪切板内容
const getClipboardData = async () => {
  const result = await navigator.clipboard.readText();
  const data = result.data;
  if (data) {
    const d = data.split(":");
    if (d.includes("怪兽漫画礼品码")) {
      code.value = d[1];
    }
  }
};

onMounted(() => {
  getClipboardData();
});
</script>

<style scoped lang="scss">
.login-box {
  display: flex;
  height: 100vh;
  background: #fff;
  flex-direction: column;
  position: relative;

  .bg {
    width: 110px;
    height: 110px;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(270deg, #9af144 0%, #ff696b 100%);
    filter: blur(125px);
  }

  .logo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 93px;

    .img {
      // width: 160rpx;
      // height: 160rpx;
      width: 130px;
      height: 130px;
      border-radius: 30px;
    }

    .text {
      width: 96px;
      height: 22px;
      margin-top: 5px;
    }
  }

  .number-box {
    display: flex;
    justify-content: center;
    margin-top: 100px;

    .text {
      color: #101010;
      text-align: center;
      font-size: 22px;
      font-weight: 750;
    }
  }

  .action-box {
    padding: 0 30px;
    margin-top: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .button {
      border: none;
      height: 40px;
      border-radius: 50px;
      background: linear-gradient(90deg, #ffc151 0%, #ff876f 100%);
      color: #101010;
      text-align: center;
      font-size: 16px;
      font-weight: 750;
      width: 100%;
      line-height: 40px;
    }

    .text {
      color: #101010;
      text-align: center;
      font-size: 14px;
      font-style: normal;
      font-weight: 550;
      margin-top: 20px;
    }
  }

  .login-type-box {
    width: 100%;
    display: flex;
    position: absolute;
    bottom: 60px;
    justify-content: center;

    .item-box {
      display: flex;
      flex-direction: column;

      .type-img {
        width: 40px;
        height: 40px;
      }

      .type-text {
        color: #6c6c6c;
        font-size: 10px;
        font-weight: 550;
        margin-top: 4px;
      }
    }
  }
}
</style>
